<template>

    <el-tabs v-model="activeTabName" class="demo-tabs" @tab-click="">
        <el-tab-pane label="基本信息" name="first">
          <EditBase :product="product" />
        </el-tab-pane>
        <el-tab-pane label="数据" name="second">
          <EditData :product="product" />
        </el-tab-pane>
        <el-tab-pane label="图片" name="third">
          <EditImage  @product-refresh="refreshProduct" />
        </el-tab-pane>

        <el-tab-pane label="规格" name="fourth">
          <EditSpecs  />
        </el-tab-pane>
        
        <el-tab-pane label="拼单" name="fifth">
          <EditPindan  />
        </el-tab-pane>
    </el-tabs>

    <div style="height:20px"></div>

	<el-row>
		<el-col>
			<el-button type="primary" @click="do_edit">保存</el-button>
		</el-col>
	</el-row>


</template>

<script setup lang="ts">

import { ref, reactive, provide } from 'vue';
import axios from 'axios';
import { Plus } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

import EditBase from './Edit/Base.vue'
import EditData from './Edit/Data.vue'
import EditImage from './Edit/Image.vue'
import EditSpecs from './Edit/Specs.vue'
import EditPindan from './Edit/Pindan.vue'

const VITE_URL = window.VITE_URL;
const route = useRoute();
const router = useRouter();

// let product_id:string|number  = 0;
let product_id:any  = 0;
const product:any = ref<object>({

	name:'1',
  image:'',
  goods_images:[],
  status:''
})
provide('product', product)
const product_pindan = ref<Object>()
provide('product_pindan', product_pindan )
const activeTabName = ref('first')

const getProductInfo = ()=>{

	const url:string = VITE_URL + '/admin.goods/info?goods_id=' + product_id;
	axios.get( url ).then( ( res:any ) => {

		product.value = res.data.product;
		product.value.name = res.data.product.name;
		product.value.status += ''; // 转换成字符串

    product_pindan.value = res.data.product.pindan;
	} );
  
}

const do_edit = () => {

	const url:string = VITE_URL + '/admin.goods/edit?goods_id=' + product_id;
	let data:any = {
		name:product.value.name,
		model:product.value.model,
		category:product.value.category_ids,
		brand_id:product.value.brand_id,
		status:product.value.status,
		description:product.value.description,
		price:product.value.price,
		special:product.value.special,
		sale:product.value.sale,
		sale_add:product.value.sale_add,
		goods_images:product.value.goods_images,
		image:product.value.image,
		pindan:product.value.pindan
    
	};
	axios.post( url, data ).then( ( res ) => {

		// product.value = res.data.product;
    ElMessage({
      'message':res.data.status == 0 ? '修改成功' : res.data.message,
      duration:1000,
      type:res.data.status == 0 ? 'success' : 'error',
    })

	} );

}

const refreshProduct = ( data:any ) => {

  // console.log('refreshProduct' , data )
  if( data.image ){
    product.value.image = data.image
  }

  if( data.goods_images ){
    product.value.goods_images = data.goods_images
  }


}
const init = ()=>{

	product_id = route.params.id ? route.params.id : 0;

	if( product_id ){

		getProductInfo();
	}
	
}
init();

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>